import React from 'react'
import { Button, message } from 'antd';
import '../../assets/styles/login.css'
import logo from '../../assets/images/images/LoginRegister/logo-blue.png'
import LogoImg from '../../assets/images/images/LoginRegister/photo.png'
import { Checkbox, Form, Input } from 'antd';
import api from '../../apis/register'
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom'
const Register = () => {
    const navigate = useNavigate()
    const onFinish = (values) => {
        console.log('Success:', values);
        if(values.password==values.pas){
            console.log(1);
             account(values)
        }else{
            console.log(2);
           message.error('密码不相符')
        }
       
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    function account(values) {
        api.registers({ ...values }).then(res => {
            console.log(res);
            if (res.code == 0) {
                // 账号密码错误
                message.error(res.msg)
            } else {
                // 账号密码正确，跳转网页
                message.success('res.msg')
                navigate('/login')
            }
        })
    }
  return (
    <div className='logins'>
            <div style={{
                width: '37%', height: '100%', position: 'absolute', top: '0px', left: '0px', background: '#fff', boxShadow: '5px 9px 30px 0px rgba(83, 122, 237, 0.52)'
            }}>
                <div style={{ width: '80%', marginLeft: '15%' }}>
                    <div style={{ width: '100%' }}>
                        <img src={logo} className='logo' alt="" />
                    </div>
                    <div style={{ fontSize: '35px', color: '#3d3d3d', marginTop: '10px' }}>Welcome To Login</div>
                    <div style={{ fontSize: '20px', color: '#3d3d3d', marginTop: '15px', fontWeight: 'bold' }}>欢迎登录考试系统</div>
                    <div style={{ width: '100%', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
                        <img src={LogoImg} alt="" style={{ width: '110px', height: '110px' }} />
                    </div>
                    <div style={{ width: '100%', marginTop: '30px' }}>
                        <Form
                            name="basic"
                            // labelCol={{
                            //     span: 8,
                            // }}
                            wrapperCol={{
                                span: 20,
                            }}
                            initialValues={{
                                remember: true,
                            }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            autoComplete="off"
                        >
                            <Form.Item
                                label="账号:"
                                name="phone"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入账号!',
                                    },
                                ]}
                            >
                                <Input />
                            </Form.Item>

                            <Form.Item
                                label="密码："
                                name="password"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入密码!',
                                    },
                                ]}
                            >
                                <Input.Password />
                            </Form.Item>
                            <Form.Item
                                label="密码："
                                name="pas"
                                rules={[
                                    {
                                        required: true,
                                        message: '请再次输入密码!',
                                    },
                                ]}
                            >
                                <Input.Password />
                            </Form.Item>

                            <Form.Item

                                wrapperCol={{
                                    offset: 4,
                                    span: 16,
                                }}
                            >
                                <Checkbox>记住密码</Checkbox>
                                <span style={{ marginLeft: '100px', color: '#295aeb' }} onClick={() => navigate('/register')}>忘记密码？</span>

                            </Form.Item>


                            <Form.Item
                                wrapperCol={{
                                    offset: 3,
                                    span: 16,
                                }}
                            >
                                <Button type="primary" htmlType="submit" style={{ width: '340px', backgroundColor: '#295aeb' }}>
                             注册
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        </div>
  )
}

export default Register